<template>
  <div>
    <!-- 信息操作 -->
    <div class="message-operate">
      <div>
        <span style="font-size:20px;">消息列表</span>
      </div>
      <div>
        <el-button :disabled="newsNum == 0 ? true : false" @click="getAllRead()">全部标记为已读</el-button>
      </div>
    </div>
    <!-- 消息列表 -->
    <div>
      <el-table
        :data="tableData"
        style="width: 95%;margin:0 auto"
        @selection-change="tableSelected"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="消息内容">
                <span>{{ props.row.content }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column
          label="消息标题"
          prop="title"
        />
        <el-table-column
          label="创建时间"
          prop="createdTime"
        />
      </el-table>

    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { systemList, allRead, informationDetails } from '@/api/iam/system'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  data() {
    return {
      id: '', // 消息ID
      activeName: '',
      sysNotificationList: [], // 消息列表
      listQuery: {
        current: 1,
        size: 20
      },
      total: 0,
      ids: [],
      listLoading: true,
      tableKey: [],
      tableData: [],
      idsArrays: [],
      newsNum: '',
      tags: ['system'],
      status: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    tableSelected(val) {
      const idsArray = []
      val.map(item => {
        idsArray.push(item.id)
      })
      console.log('dddddddd', idsArray)
      this.idsArrays = idsArray
    },
    getList() {
      var status = ['PENDING', 'READ']
      const data = {
        'tags': this.tags,
        'status': status,
        'current': this.listQuery.current,
        'size': this.listQuery.size
      }
      systemList(data).then((response) => {
        console.log('消息列表', response.records)
        this.tableData = response.records
        this.total = parseInt(response.total)
        this.newsNum = response.records
      })
    },
    allReadClick() {
      this.getAllRead()
      console.log('点击全部已读', this.newsNum)
    },
    // 已读
    getAllRead() {
      if (this.idsArrays.length !== 0) {
        const data = {
          'ids': this.idsArrays
        }
        allRead(data).then((response) => {
          console.log('全部已读', response)
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        })
      }
    },
    informationClick(e) {
      this.id = e
      console.log('id', this.id)
    },
    detailsClick() {
      informationDetails(this.id).then((response) => {
        console.log('消息详情', response)
      })
    }
  }
}
</script>
<style>
.sysNotification{
  border: 1px solid #E6EBF5;
  -webkit-box-shadow:0 0 2px #7D7D7D;
  -moz-box-shadow:0 0 2px #7D7D7D;
  box-shadow:0 0 1px #7D7D7D;
  width: 95%;
  margin: 0 auto;
  /* margin-top: 30px; */
}
.sysNotification-collapse{
  width: 95%;
  margin: 0 auto;

}
.message-operate{
  height: 100px;
  width: 95%;
  margin: 0 auto;
  line-height: 100px;
  display: flex;
  flex-wrap: nowrap;
  justify-content:space-between;
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
